<template>
	<view class="page-recommend">
    <view class="page-recommend__list">
      <view class="list__item" 
        v-for="(item, index) in musicList" 
        :key="item.id"
        @click="handlePlay(item.id)">
        <view class="left">
          <view class="title">{{ item.name }}</view>
          <view class="info">{{ item.song.artists | formatArtists }} - {{ item.song.album.name }}</view>
        </view>
        <view class="right">
          <text class="iconfont iconbofang"></text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				musicList: []
			}
		},
    filters: {
      formatArtists (value) {
        // [{name: '1'}, {name:'2'}] => map => [1, 2] => 1/2
        const tmpArr = value.map(item => item.name)
        return tmpArr.join('/')
      }
    },
		methods: {
			getMusicList () {
        uni.request({
          url: "http://10.36.147.90:3000/personalized/newsong",
          success: ({ data }) => {
            if (data.code === 200) {
              this.musicList = data.result
            } else {
              uni.showToast({
                title: '获取推荐音乐失败',
                icon: 'none'
              })
            }
          },
        })
      },
      
      handlePlay (id) {
        uni.navigateTo({
          url: `../song/song?id=${id}`
        })
      }
		},
    created() {
      this.getMusicList()
    }
	}
</script>

<style lang="scss">
.page-recommend {
  &__list {
    padding-left: 20rpx;
  }
  .list__item {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx 20rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    .left {
      line-height: 1.6;
      flex: 1;
    }
    .right {
      .iconfont {
        font-size: 60rpx;
      }
    }
    .title {
      font-size: 36rpx;
      color: #333333;
    }
    .info {
      font-size: 24rpx;
      color: #888888;
    }
  }
}
</style>
